<template>
  <div class="app-container customer-div">

    <el-row :gutter="20">
      <el-col :span="12">
        <div id="container" ref="container" style="height:400px;width:100%"/>
      </el-col>
      <el-col :span="12">
        <div style="height:400px;overflow: auto;border:1px solid #DCDFE6;padding:20px 0">
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in orderPositionInfos"
              :key="index">
              <div style="color:#aaa;" v-if="item.createTime">{{item.createTime |formatTime }}</div>
              <div style="margin-top:10px;">{{item.address}}</div>
            </el-timeline-item>
          </el-timeline>
          <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderPositionInfos.length == 0">- 暂无数据 -</div>
        </div>
      </el-col>
    </el-row>



  </div>
</template>
<script>


import {driverPosition, ymmOrderInfo} from "../../api/partner";
import {formatDate} from '@/utils/date';
export default {
  name: "trajectoryMap2",
  data(){

    return {
      dialogVisible: false,
      map:null,
      marker:null,
      lineArr: [],
      orderPositionInfos:[],
      orderInfo:{},
      ymmOrderId:'',
    }
  },
  props:{
  },
  computed: {

  },
  created() {

  },
  filters:{
    formatTime(time) {
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
  },
  methods:{
    //显示地图
    showMap(ymmOrderId,orderState) {
      console.log(ymmOrderId)
      this.ymmOrderId = ymmOrderId;
      this.orderState  = orderState;
      this.getDriverPosition()
    },

    //获取地图轨迹
    getDriverPosition(){
      driverPosition({ymmOrderId:this.ymmOrderId}).then((res)=>{
          let black = res;
        // let black={
        //   "orderId": "15178430574923776",
        //   "orderPositionInfos": [{
        //     "lat": "31.980429972474826882944398676045238971710205078125",
        //     "lon": "118.763843826769942779719713144004344940185546875",
        //     "createTime": 1597320025458,
        //     "address": "江苏省常州市天宁区"
        //   },
        //     {
        //       "lat": "31.9804269732013182192531530745327472686767578125",
        //       "lon": "118.76384282637383194014546461403369903564453125",
        //       "createTime": 1597319905385,
        //       "address": ""
        //     },
        //     {
        //       "lat": "31.9803630241113836518707103095948696136474609375",
        //       "lon": "118.7637758084158150495568406768143177032470703125",
        //       "createTime": 1597319776167,
        //       "address": ""
        //     },
        //     {
        //       "lat": "31.9803898695054158451966941356658935546875",
        //       "lon": "118.7639758517351395994410268031060695648193359375",
        //       "createTime": 1597319655993,
        //       "address": ""
        //     },
        //     {
        //       "lat": "31.980344845525142005726593197323381900787353515625",
        //       "lon": "118.764005855157591895476798526942729949951171875",
        //       "createTime": 1597319545357,
        //       "address": "178"
        //     },
        //     {
        //       "lat": "31.980344845525142005726593197323381900787353515625",
        //       "lon": "118.764005855157591895476798526942729949951171875",
        //       "createTime": 1597319425236,
        //       "address": "178"
        //     },
        //     {
        //       "lat": "31.980344845525142005726593197323381900787353515625",
        //       "lon": "118.764005855157591895476798526942729949951171875",
        //       "createTime": 1597319296085,
        //       "address": "178"
        //     },
        //     {
        //       "lat": "31.980344845525142005726593197323381900787353515625",
        //       "lon": "118.764005855157591895476798526942729949951171875",
        //       "createTime": 1597319185261,
        //       "address": "178"
        //     },
        //     {
        //       "lat": "31.980344845525142005726593197323381900787353515625",
        //       "lon": "118.764005855157591895476798526942729949951171875",
        //       "createTime": 1597319055975,
        //       "address": "178"
        //     },
        //     {
        //       "lat": "31.980265855863489576904612476937472820281982421875",
        //       "lon": "118.7639908470873564283465384505689144134521484375",
        //       "createTime": 1597318935966,
        //       "address": ""
        //     },
        //     {
        //       "lat": "31.980233849918352717622838099487125873565673828125",
        //       "lon": "118.7639978465389276607311330735683441162109375",
        //       "createTime": 1597318816135,
        //       "address": ""
        //     },
        //     {
        //       "lat": "31.980233849918352717622838099487125873565673828125",
        //       "lon": "118.7639978465389276607311330735683441162109375",
        //       "createTime": 1597318695957,
        //       "address": ""
        //     },
        //     {
        //       "lat": "31.980340982656574766451740288175642490386962890625",
        //       "lon": "118.7638288180715022690492332912981510162353515625",
        //       "createTime": 1597318575984,
        //       "address": ""
        //     },
        //     {
        //       "lat": "31.980340982656574766451740288175642490386962890625",
        //       "lon": "118.7638288180715022690492332912981510162353515625",
        //       "createTime": 1597318465420,
        //       "address": ""
        //     },
        //     {
        //       "lat": "31.980445918469843746834158082492649555206298828125",
        //       "lon": "118.7639138423419780110634746961295604705810546875",
        //       "createTime": 1597318336037,
        //       "address": ""
        //     },
        //     {
        //       "lat": "31.98045486591328057102145976386964321136474609375",
        //       "lon": "118.7639818570559810950726387090981006622314453125",
        //       "createTime": 1597318225296,
        //       "address": "江苏省无锡市锡山区"
        //     }
        //   ],
        //   "truckNumber": "A12345"
        // }
        this.orderPositionInfos = [];
        this.lineArr = [];
        if(black.orderPositionInfos){
          this.orderPositionInfos = black.orderPositionInfos;
          this.orderPositionInfos.forEach((el)=>{
            this.lineArr.push([parseFloat(el.lon),parseFloat(el.lat)])
          })
        }
        this.drawTrajectory();
      })
    },


    drawTrajectory(){
      let endArr = this.lineArr[0];
      let firstArr = this.lineArr[this.lineArr.length - 1];
      let endPoint = this.orderPositionInfos[0];
      let firstPoint = this.orderPositionInfos[this.orderPositionInfos.length - 1];
      let date = new Date(endPoint.createTime);
      let endTime = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      this.map = new AMap.Map(this.$refs.container, {
        resizeEnable: true,
        center:endArr,//这是地图的中心点
        zoom: 10,//地图的层级
      })

      var startContent = '<div class="marker-block start"><div class="marker-point">'+
        '<span class="label">装</span>'+
        '<span class="text">'+firstPoint['address']+'</span>'+
        '</div></div>'

      var carContent =
        '<div class="marker-block doing">'+
        '<div class="marker-point">'+
        '<div class="label">运输<br/>途中</div>'+
        '<div class="text" style="line-height: 20px">'+
        '<div style="font-size:14px;">'+endPoint['address']+'</div>'+
        '<div style="font-size:12px;color:#888">'+endTime+'</div>'+
        '</div>'+
        '</div>'+
        '<div class="marker-img"><img src="https://pic.moresu.com/FoDR0X4U5YGy4BMww_Md4jr-POBA"/></div>'+
        '</div>'

      var endContent = '<div class="marker-block"><div class="marker-point">'+
        '<span class="label">卸</span>'+
        '<span class="text">'+endPoint['address']+'</span>'+
        '</div></div>'

      if(this.orderState == 50){
        this.marker = new AMap.Marker({  //起点
          map: this.map,
          position: firstArr,
          content: startContent,
          // icon: "https://pic.moresu.com/FpoLN3gRXlBAv2jAR76cgzYWKE9y",
          offset: new AMap.Pixel(-13, -30),
        });
        this.marker = new AMap.Marker({ //终点
          map: this.map,
          position: endArr,
          content: endContent,
          // anchor: 'center',
          // icon: "https://pic.moresu.com/FtqlcY7hp_hus3G0XFBwnx2dlBRc",
          offset: new AMap.Pixel(-13, -30),
        });
      }else if(this.orderState != 10){
        this.marker = new AMap.Marker({  //起点
          map: this.map,
          position: firstArr,
          content: startContent,
          // icon: "https://pic.moresu.com/FpoLN3gRXlBAv2jAR76cgzYWKE9y",
          offset: new AMap.Pixel(-13, -30),
        });
        if(this.lineArr.length > 0){
          this.marker = new AMap.Marker({ //车辆
            map: this.map,
            position: endArr,
            content: carContent,
            // icon: "https://pic.moresu.com/FoDR0X4U5YGy4BMww_Md4jr-POBA",
          });
        }
      }

      // 绘制轨迹
      var polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir:true,
        strokeColor: "#28F",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
      });

      var passedPolyline = new AMap.Polyline({
        map: this.map,
        // path: lineArr,
        strokeColor: "#AF5",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
      });


      this.marker.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath);
      });

      this.map.setFitView();
    },

  },
}
</script>

<style  lang="scss">
  .marker-block{
    text-align: center;
    display: inline-block;
    .marker-point{
      background: #fff;
      border-radius: 5px;
      border:2px solid #eb4829;
      color:#000;
      font-size:14px;
      display: inline-block;
      white-space:nowrap;
      line-height: 22px;
      .label {
        display: inline-block;
        padding:0 5px;
        background: #eb4829;
        color: #fff;
        text-align: left;
      }
      .text{
        display: inline-block;
        padding:0 5px;
        text-align: left;
      }
    }

  }
  .marker-block.start{
    .marker-point{
      border:2px solid #0d88fc;
      .label {
        background: #0d88fc;
      }
    }
  }
  .doing.marker-block{
    text-align: left;
    position: relative;
    //padding-left:50px;
    .marker-point{
      .text{
        padding:0 10px;
        vertical-align: middle;
      }
      .label{
        vertical-align: middle;
      }
    }
    .marker-img{
      position: absolute;
      left:-37px;
      top:0
    }
  }
  .map-card-div{
    margin-top:20px;
    border-radius: 5px;
    border:1px solid #DCDFE6;
    padding:10px;
  }

</style>
